<div class="row hk-btm-configuration">
  <div class="col-xs-12">

    <ol class="breadcrumb">
      <li> <a href="/hawkular-ui/apm/btm">Transactions</a> </li>
      <li ng-hide="txn.level === 'Ignore'"> <a href="/hawkular-ui/apm/btm">Managed</a> </li>
      <li ng-show="txn.level === 'Ignore'"> <a href="/hawkular-ui/apm/btm/ignored">Ignored</a> </li>
      <li> <a href="/hawkular-ui/apm/btm/info/{{transactionName}}">{{transactionName}}</a> </li>
      <li class="active"> <strong>Configuration</strong> </li>
    </ol>

    <h1>{{transactionName}}</h1>

    <alert ng-repeat="message in messages" type="{{getMessageType(message)}}" close="closeMessage($index)"><strong>{{getMessageText(message)}}</strong>
      <div ng-hide="message.details === undefined">
        {{message.details}}
      </div>
    </alert>

    <a href="#" class="hk-transaction-description" editable-textarea="transaction.description" e-rows="3" e-cols="108" onaftersave="setDirty()" tooltip="Click to edit">
      <span>{{ transaction.description || 'No description' }}</span>
    </a>

    <div class="row">

      <div class="col-md-12">
        <h2>Filters</h2>
      </div>

      <div class="col-md-6" >
        <h4>Inclusion</h4>
        <!-- TODO: Use angular-ui/bootstrap typeahead to autofill possible inclusion URIs -->
        <ul class="list-group">
          <li class="list-group-item" ng-repeat="inclusion in transaction.filter.inclusions" >{{inclusion}}<span class="glyphicon glyphicon-remove pull-right" aria-hidden="true" ng-click="removeInclusionFilter(inclusion)" tooltip="Remove"></span></li>
          <li class="list-group-item clearfix">
            <form class="form-horizontal" name="addInclusionForm" role="form" autocomplete="off" ng-submit="addInclusionFilter()">
              <div class="input-group">
                <input type="text" class="form-control" name="newInclusionFilterField"
                     ng-model="newInclusionFilter" ng-model-options="{ updateOn: 'default blur'}"
                     placeholder="Enter an inclusion filter (regular expression)"
                     typeahead="endpoint for endpoint in unboundEndpoints | filter:$viewValue | limitTo:12" />
                <span class="input-group-btn">
                  <button class="btn btn-default" type="submit" ng-disabled="!newInclusionFilter"  tooltip="Add">
                    <div ng-show="addProgress" class="spinner spinner-sm"></div>
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                  </button>
                </span>
              </div>
            </form>
          </li>
        </ul>
      </div>

      <div class="col-md-6" >
        <h4>Exclusion (applied after inclusions)</h4>
        <ul class="list-group">
          <li class="list-group-item" ng-repeat="exclusion in transaction.filter.exclusions" >{{exclusion}}<span class="glyphicon glyphicon-remove pull-right" aria-hidden="true" ng-click="removeExclusionFilter(exclusion)" tooltip="Remove"></span></li>
          <li class="list-group-item clearfix" >
            <form class="form-horizontal" name="addExclusionForm" role="form" autocomplete="off" novalidate="" ng-submit="addExclusionFilter()">
              <div class="input-group">
                <input type="text" class="form-control" name="newExclusionFilterField"
                     ng-model="newExclusionFilter" ng-model-options="{ updateOn: 'default blur'}"
                     placeholder="Enter an exclusion filter (regular expression)"
                     typeahead="endpoint for endpoint in unboundEndpoints | filter:$viewValue | limitTo:12" />
                <span class="input-group-btn">
                  <button class="btn btn-default" type="submit" ng-disabled="!newExclusionFilter" tooltip="Add">
                    <div ng-show="addProgress" class="spinner spinner-sm"></div>
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                  </button>
                </span>
              </div>
            </form>
          </li>
        </ul>
      </div>

      <div class="col-md-12" >
        <form class="form-inline">
          <div class="form-group clearfix">
            <label for="level" >Reporting Level:</label>
            <select name="nodeType" ng-model="transaction.level" ng-change="setDirty()" class="form-control">
              <option value="All">All</option>
              <option value="None">None</option>
              <option value="Ignore">Ignore</option>
            </select>
          </div>
        </form>
      </div>

      <div class="col-md-12" >
        <a class="btn btn-default hk-btn-accordeon-processor" ng-click="addProcessor()">Add Processor</a>
      </div>

      <div class="col-md-12" >

        <accordion>
          <accordion-group ng-repeat="processor in transaction.processors" is-open="false" is-disabled="false">
            <accordion-heading>{{processor.description}} <a class="btn btn-link hk-delete pull-right" href="#" uibTooltip="Delete" tooltip-trigger="" tooltip-placement="top" ng-click="deleteProcessor(processor)"><i class="fa fa-trash-o"></i></a></accordion-heading>

            <form>
              <div class="form-group clearfix">
                <label for="description" class="col-sm-3">Description:</label>
                <div class="col-sm-6">
                  <input class="form-control" type="text" name="description" ng-model="processor.description" ng-change="setDirty()" />
                </div>
              </div>

              <div class="form-group clearfix">
                <label for="nodeType" class="col-sm-3" > Node type: </label>
                <div class="col-sm-6">
                  <select name="nodeType" ng-model="processor.nodeType" ng-change="setDirty()" class="form-control">
                    <option value="Consumer">Consumer</option>
                    <option value="Producer">Producer</option>
                    <option value="Component">Component</option>
                  </select>
                </div>
              </div>

              <div class="form-group clearfix">
                <label for="direction" class="col-sm-3">Direction: </label>
                <div class="col-sm-6">
                  <select name="direction" ng-model="processor.direction" ng-change="setDirty()" class="form-control">
                    <option value="In">In</option>
                    <option value="Out">Out</option>
                  </select>
                </div>
              </div>

              <div class="form-group clearfix">
                <label for="uriFilter" class="col-sm-3">URI filter:</label>
                <div class="col-sm-6">
                  <input type="text" name="uriFilter" class="form-control"
                       ng-model="processor.uriFilter" ng-model-options="{ updateOn: 'default blur'}"
                       placeholder="Enter URI filter (regular expression)"
                       typeahead="endpoint for endpoint in boundEndpoints | filter:$viewValue | limitTo:12"
                       ng-change="setDirty()" />
                </div>
              </div>

              <div class="form-group clearfix">
                <label for="operation" class="col-sm-3">Operation:</label>
                <div class="col-sm-6">
                  <input type="text" name="operation" ng-model="processor.operation" ng-change="setDirty()" class="form-control" />
                </div>
              </div>

              <div class="form-group clearfix">
                <label for="faultFilter" class="col-sm-3">Fault filter:</label>
                <div class="col-sm-6">
                  <input type="text" name="faultFilter" ng-model="processor.faultFilter" ng-change="setDirty()" class="form-control" />
                </div>
              </div>

              <div class="form-group clearfix">
                <label for="predicateType" class="col-sm-3">Predicate Type: </label>
                <div class="col-sm-6">
                  <select name="predicateType" ng-model="processor.predicate.type" ng-change="changedExpressionType(processor,'predicate',processor.predicate)" class="form-control">
                    <option value=""></option>
                    <option value="Literal">Literal</option>
                    <option value="XML">XML</option>
                    <option value="JSON">JSON</option>
                  </select>
                </div>
              </div>

              <div class="form-group clearfix" ng-show="processor.predicate.type === 'XML' || processor.predicate.type === 'JSON'">
                <label class="col-sm-3" for="predicateSource" >Source: </label>
                <div class="col-sm-6">
                  <select name="predicateSource" ng-model="processor.predicate.source" ng-change="setDirty()" ng-show="processor.predicate.type === 'XML' || processor.predicate.type === 'JSON'" class="form-control">
                    <option value="Content">Content</option>
                    <option value="Header">Header</option>
                  </select>
                </div>
              </div>

              <div class="form-group clearfix" ng-show="processor.predicate.type === 'XML' || processor.predicate.type === 'JSON'">
                <label class="col-sm-3" for="predicateKey">Key: </label>
                <div class="col-sm-6">
                  <input type="text" name="predicateKey" ng-model="processor.predicate.key" ng-change="setDirty()" class="form-control" ng-show="processor.predicate.type === 'XML' || processor.predicate.type === 'JSON'"/>
                </div>
              </div>

              <div class="form-group clearfix" ng-show="processor.predicate.type === 'XML'">
                <label class="col-sm-3" for="predicateXPath" >XPath: <a href="http://www.w3schools.com/xsl/xpath_syntax.asp"  target="_blank"><i class="fa fa-info-circle"></i></a></label>
                <div class="col-sm-6">
                  <input type="text" name="predicateXPath" ng-model="processor.predicate.xpath" ng-change="setDirty()" class="form-control" ng-show="processor.predicate.type === 'XML'"/>
                </div>
              </div>

              <div class="form-group clearfix" ng-show="processor.predicate.type === 'JSON'">
                <label class="col-sm-3" for="predicateJSONPath" >JSONPath: <a href="http://goessner.net/articles/JsonPath/"  target="_blank"><i class="fa fa-info-circle"></i></a></label>
                <div class="col-sm-6">
                  <input type="text" name="predicateJSONPath" ng-model="processor.predicate.jsonpath" ng-change="setDirty()" class="form-control" ng-show="processor.predicate.type === 'JSON'"/>
                </div>
              </div>

              <div class="form-group clearfix" ng-show="processor.predicate.type === 'Literal'">
                <label class="col-sm-3" for="predicateValue" >Value:</label>
                <div class="col-sm-6">
                  <input type="text" name="predicateValue" ng-model="processor.predicate.value" ng-change="setDirty()" class="form-control" ng-show="processor.predicate.type === 'Literal'"/>
                </div>
              </div>
            </form>

            <div dropdown="">
              <a href="" id="simple-dropdown" dropdown-toggle="" class="btn btn-default hk-btn-accordeon-add">
                Add Action
              </a>
              <ul class="dropdown-menu" aria-labelledby="simple-dropdown">
                <li><a href="" ng-click="addAction(processor, 'AddContent')">Add Content</a></li>

                <!-- See HWKAPM-566
                <li><a href="" ng-click="addAction(processor, 'AddCorrelationId')">Add Correlation Identifier</a></li>
                -->

                <li><a href="" ng-click="addAction(processor, 'EvaluateURI')">Evaluate URI</a></li>
                <li><a href="" ng-click="addAction(processor, 'SetProperty')">Set Property</a></li>
              </ul>
            </div>

            <accordion>
              <accordion-group ng-repeat="action in processor.actions" is-open="false" is-disabled="false">
                <accordion-heading>[ {{action.actionType}} {{action.name}} ]: {{action.description}} <a class="btn btn-link hk-delete pull-right" href="#" tooltip="Delete" tooltip-trigger="" tooltip-placement="top" ng-click="deleteAction(processor,action)"><i class="fa fa-trash-o"></i></a></accordion-heading>

                <form>
                  <div class="form-group clearfix">
                    <label for="description" class="col-sm-3">Description:</label>
                    <div class="col-sm-6">
                      <input type="text" name="description" ng-model="action.description" ng-change="setDirty()" class="form-control" />
                    </div>
                  </div>

                  <div class="form-group clearfix">
                    <label for="actionPredicateType" class="col-sm-3">Predicate Type: </label>
                    <div class="col-sm-6">
                      <select name="actionPredicateType" ng-model="action.predicate.type" ng-change="changedExpressionType(action,'predicate',action.predicate)" class="form-control">
                        <option value=""></option>
                        <option value="Literal">Literal</option>
                        <option value="XML">XML</option>
                        <option value="JSON">JSON</option>
                      </select>
                    </div>
                  </div>

                  <div class="form-group clearfix" ng-show="action.predicate.type === 'XML' || action.predicate.type === 'JSON'">
                    <label for="actionPredicateSource" class="col-sm-3" >Predicate Source: </label>
                    <div class="col-sm-6">
                      <select name="actionPredicateSource" ng-model="action.predicate.source" ng-change="setDirty()" ng-show="action.predicate.type === 'XML' ||action.predicate.type === 'JSON'" class="form-control">
                        <option value="Content">Content</option>
                        <option value="Header">Header</option>
                      </select>
                    </div>
                  </div>

                  <div class="form-group clearfix" ng-show="action.predicate.type === 'XML' || action.predicate.type === 'JSON'">
                    <label for="actionPredicateKey" class="col-sm-3" >Predicate Key: </label>
                    <div class="col-sm-6">
                      <input type="text" name="actionPredicateKey" ng-model="action.predicate.key" ng-change="setDirty()"  ng-show="action.predicate.type === 'XML' || action.predicate.type === 'JSON'" class="form-control"/>
                    </div>
                  </div>

                  <div class="form-group clearfix" ng-show="action.predicate.type === 'XML'">
                    <label for="actionPredicateXPath" class="col-sm-3" >Predicate XPath: <a href="http://www.w3schools.com/xsl/xpath_syntax.asp"  target="_blank"><i class="fa fa-info-circle"></i></a></label>
                    <div class="col-sm-6">
                      <input type="text" name="actionPredicateXPath" ng-model="action.predicate.xpath" ng-change="setDirty()"  ng-show="action.predicate.type === 'XML'" class="form-control"/>
                    </div>
                  </div>

                  <div class="form-group clearfix" ng-show="action.predicate.type === 'JSON'">
                    <label for="actionPredicateJSONPath" class="col-sm-3" >Predicate JSONPath: <a href="http://goessner.net/articles/JsonPath/"  target="_blank"><i class="fa fa-info-circle"></i></a></label>
                    <div class="col-sm-6">
                      <input type="text" name="actionPredicateJSONPath" ng-model="action.predicate.jsonpath" ng-change="setDirty()"  ng-show="action.predicate.type === 'JSON'" class="form-control"/>
                    </div>
                  </div>

                  <div class="form-group clearfix" ng-show="action.predicate.type === 'Literal'">
                    <label for="actionPredicate" class="col-sm-3" >Predicate Value:</label>
                    <div class="col-sm-6">
                      <input type="text" name="actionPredicate" ng-model="action.predicate.value" ng-change="setDirty()"  ng-show="action.predicate.type === 'Literal'" class="form-control"/>
                    </div>
                  </div>

                    <!-- HWKBTM-273 Using 'ng-class' attribute to try to highlight the error field, but at the point
                         where the form is displayed the errors aren't available, and their retrieval does not
                         cause a change in state that refreshes the field. -->

                  <div class="form-group clearfix">
                    <label for="actionName" ng-class="{error:isError(processor,action,'name')}" class="col-sm-3" ng-show="action.actionType === 'AddContent' || action.actionType === 'SetProperty'" >Name:</label>
                    <div class="col-sm-6">
                      <input type="text" name="actionName" ng-model="action.name" ng-change="setDirty()" ng-show="action.actionType === 'AddContent' || action.actionType === 'SetProperty'" class="form-control" />
                    </div>
                  </div>

                  <div class="form-group clearfix">
                    <label for="actionName" ng-class="{error:isError(processor,action,'type')}" class="col-sm-3" ng-show="action.actionType === 'SetProperty'" >Property Type:</label>
                    <div class="col-sm-6">
                      <select name="propertyType" ng-model="action.type" ng-show="action.actionType === 'SetProperty'" ng-change="setDirty()" class="form-control">
                        <option value="Text">Text</option>
                        <option value="Number">Number</option>
                      </select>
                    </div>
                  </div>

                  <div class="form-group clearfix" ng-show="action.actionType === 'AddContent'" >
                    <label for="actionType" class="col-sm-3" >Type:</label>
                    <div class="col-sm-6">
                      <input type="text" name="actionType" ng-model="action.type" ng-change="setDirty()" ng-show="action.actionType === 'AddContent'" class="form-control" />
                    </div>
                  </div>

                  <div class="form-group clearfix" ng-show="action.actionType === 'AddCorrelationId'">
                    <label for="correlationScope"  class="col-sm-3" >Correlation Scope: </label>
                    <div class="col-sm-6">
                      <select name="correlationScope" ng-model="action.scope" ng-show="action.actionType === 'AddCorrelationId'" ng-change="setDirty()" class="form-control">
                        <!-- HWKAPM-566 - not sure whether this scope value should be specified by the user.
                             Possibly only reserved for auto-generated interaction based correlation.
                        <option value="Interaction">Interaction</option>
                        -->
                      </select>
                    </div>
                  </div>

                  <div class="form-group clearfix" ng-show="action.actionType === 'EvaluateURI'" >
                    <label for="actionTemplate" ng-class="{error:isError(processor,action,'template')}" class="col-sm-3" >Template URI:</label>
                    <div class="col-sm-6">
                      <input type="text" name="actionTemplate" ng-model="action.template" ng-change="setDirty()" ng-show="action.actionType === 'EvaluateURI'" class="form-control" />
                    </div>
                  </div>

                  <div class="form-group clearfix" ng-if="action.actionType !== 'EvaluateURI' &amp;&amp; action.actionType !== undefined" >
                    <label for="actionValueType" ng-class="{error:isError(processor,action,'expression')}" class="col-sm-3" >Value Type: </label>
                    <div class="col-sm-6">
                      <select name="actionValueType" ng-model="action.expression.type" ng-change="changedExpressionType(action,'expression',action.expression)" class="form-control">
                        <option value=""></option>
                        <option value="Literal">Literal</option>
                        <option value="XML">XML</option>
                        <option value="JSON">JSON</option>
                        <option value="Text">Text</option>
                      </select>
                    </div>
                  </div>


                  <div class="form-group clearfix" ng-show="action.expression.type === 'XML' || action.expression.type === 'JSON' || action.expression.type === 'Text'">
                    <label for="actionValueSource" class="col-sm-3" >Value Source: </label>
                    <div class="col-sm-6">
                      <select name="actionValueSource" ng-model="action.expression.source" ng-change="setDirty()" ng-show="action.expression.type === 'XML' || action.expression.type === 'JSON' || action.expression.type === 'Text'" class="form-control">
                        <option value="Content">Content</option>
                        <option value="Header">Header</option>
                      </select>
                    </div>
                  </div>

                  <div class="form-group clearfix" ng-show="action.expression.type === 'XML' || action.expression.type === 'JSON' || action.expression.type === 'Text'">
                    <label for="actionValueKey" class="col-sm-3" >Value Key: </label>
                    <div class="col-sm-6">
                      <input type="text" name="actionValueKey" ng-model="action.expression.key" ng-change="setDirty()"  ng-show="action.expression.type === 'XML' || action.expression.type === 'JSON' || action.expression.type === 'Text'" class="form-control"/>
                    </div>
                  </div>

                  <div class="form-group clearfix" ng-show="action.expression.type === 'XML'">
                    <label for="actionValueXPath" class="col-sm-3" >Value XPath: <a href="http://www.w3schools.com/xsl/xpath_syntax.asp"  target="_blank"><i class="fa fa-info-circle"></i></a></label>
                    <div class="col-sm-6">
                      <input type="text" name="actionValueXPath" ng-model="action.expression.xpath" ng-change="setDirty()"  ng-show="action.expression.type === 'XML'" class="form-control"/>
                    </div>
                  </div>

                  <div class="form-group clearfix" ng-show="action.expression.type === 'JSON'">
                    <label for="actionValueJSONPath" class="col-sm-3" >Value JSONPath: <a href="http://goessner.net/articles/JsonPath/"  target="_blank"><i class="fa fa-info-circle"></i></a></label>
                    <div class="col-sm-6">
                      <input type="text" name="actionValueJSONPath" ng-model="action.expression.jsonpath" ng-change="setDirty()"  ng-show="action.expression.type === 'JSON'" class="form-control"/>
                    </div>
                  </div>

                  <div class="form-group clearfix" ng-show="action.expression.type === 'Literal'">
                    <label for="actionValue" class="col-sm-3" >Value:</label>
                    <div class="col-sm-6">
                      <input type="text" name="actionValue" ng-model="action.expression.value" ng-change="setDirty()" ng-show="action.expression.type === 'Literal'" class="form-control"/>
                    </div>
                  </div>

                </form>

              </accordion-group>
            </accordion>

          </accordion-group>
        </accordion>
      </div>

      <div class="col-md-12">
        <div class="hk-form-actions">
          <button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="!dirty">Save</button>
          <button type="button" class="btn btn-default" ng-click="reset()" ng-disabled="!dirty">Discard</button>
        </div>
      </div>

  </div>
</div>
